<template>
  <div v-if="statusCode === 401" class="text-center py-4">
    <p>Redirecting...</p>
  </div>
  <div v-else-if="statusCode === 404" class="wrapper text-center pt-16 px-4">
    <van-image
      src="https://img.mytijian.com/common/img/2021-07/1626340041-Ey22VM.png"
      width="8.75rem"
      height="6.66rem"
      fit="contain"
    />
    <div class="text--primary mt-2 mb-4 font-weight-bold">
      {{ $tv(`error-page.title.404`, '未找到相关页面！') }}
    </div>
    <div class="d-flex flex-center-main">
      <van-button style="min-width: 120px" round type="primary" @click="goTo({ name: 'home' })">
        {{ $tv('error-page.back-home', '返回首页') }}
      </van-button>
    </div>
  </div>
  <div v-else class="wrapper text-center pt-16 px-4">
    <!-- <van-image :src="require('@/assets/images/error.png')" width="8.75rem" height="6.66rem" fit="contain" /> -->
    <van-image
      src="https://img.mytijian.com/common/img/2021-07/1626340041-Ey22VM.png"
      width="8.75rem"
      height="6.66rem"
      fit="contain"
    />
    <!-- <div class="mt-2 font-weight-bold">{{ $tv(`error-page.title.${error.statusCode || '500'}`, '发生错误') }}</div> -->
    <div class="text--secondary mt-2 mb-4">{{ message }}</div>
    <div v-if="showBackHome" class="d-flex flex-center-main">
      <van-button style="min-width: 120px" round type="primary" @click="goTo({ name: 'home' })">
        {{ $tv('error-page.back-home', '返回首页') }}
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['error'],
  computed: {
    showBackHome() {
      return this.error?.showBackHome === true;
    },
    statusCode() {
      return this.error?.statusCode || 500;
    },
    message() {
      return (
        this.error?.message ||
        this.$tv(`error-page.description.${this.statusCode}`, `发生错误(code:${this.statusCode})!`)
      );
    },
  },
  created() {
    this.$log(new Error(this.message), {
      level: 'warning',
      tags: {
        newCompanyId: this.$storage.get('newCompanyId'),
        site: this.$storage.get('site'),
        statusCode: this.statusCode,
      },
    });
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  min-height: 100vh;
  background: @white;
}
</style>
